/**
 * Copyright (c) 快宝网络 kuaidihelp.com Co., Ltd. All Rights Reserved 禁止外泄以及用于其它的商业用途
 */

/**
 * 新零售大屏，昨日入库量排名
 *  */
import React, { useState, useCallback, useRef, useEffect } from "react";
import { connect } from "dva";
import { useInterval } from "ahooks";
import DataSet from "@antv/data-set";
import { Chart, Geom, Axis, Tooltip, Coord, Label } from "bizcharts";
import { lineStyleRow, gradualTextColumn } from "./_utils";
import CommonBorder from "./Wrappers/CommonBorder";
import NoDate from "./Wrappers/NoDate";

const cols = {
  num: {
    alias: "数量",
    type: "pow",
    exponent: 10,
    min: 0,
  },
};

const label = {
  formatter(text) {
    return `${text}`.substr(0, 4) + (text.length > 4 ? "..." : "");
  },
  textStyle: {
    offset: 12,
    fill: gradualTextColumn, // 文本的颜色
    fontSize: "14", // 文本大小
    fontWeight: "bold", // 文本粗细
  },
};

const ds = new DataSet();

const YzYesterdayInNum = ({ dispatch, isParentFull, loading, screenToken }) => {
  const [data, setData] = useState({});
  const [hasData, setHasData] = useState(false);
  const [height, setHeight] = useState(0);
  const heightRef = useRef({});
  const timer = useRef(null);

  const fetchData = useCallback(
    () => {
      dispatch({
        type: "chartData/getStorageInNumRankYesterday",
        payload: {
          token: screenToken,
        },
      }).then((res = []) => {
        const dv = ds.createView().source(res.reverse());
        setHasData(res.length > 0);
        setData(dv);
      });
    },
    [dispatch, screenToken]
  );

  useEffect(
    () => {
      timer.current = setTimeout(() => {
        heightRef.current && setHeight(heightRef.current.clientHeight);
      }, 1000);
      return () => {
        timer.current && clearTimeout(timer.current);
      };
    },
    [isParentFull]
  );

  useEffect(fetchData, [fetchData]);
  useInterval(fetchData, 1000 * 60 * 60);

  return (
    <CommonBorder title="昨日入库量排名" loading={loading}>
      <div style={{ height: "100%" }} ref={heightRef}>
        {hasData ? (
          <Chart
            style={{ backgroundColor: "rgba(15, 24, 55, 0.7)" }}
            height={height}
            data={data}
            forceFit
            scale={cols}
            padding={["auto", 40, "auto", "auto"]}
          >
            <Coord transpose />
            <Axis name="inn_name" label={label} line={null} tickLine={null} />
            <Axis name="in_num" visible={false} />
            <Tooltip
              crosshairs={{
                type: "x",
              }}
            />
            <Geom
              type="interval"
              position="inn_name*in_num"
              shape="round-rect"
              style={lineStyleRow}
              tooltip={[
                "inn_name*in_num",
                (inn_name, in_num) => {
                  return {
                    name: "入库数",
                    title: inn_name,
                    value: in_num,
                  };
                },
              ]}
            >
              <Label content="in_num" textStyle={label.textStyle} textAlign="center" offsetX={5} />
            </Geom>
          </Chart>
        ) : (
          <NoDate title="暂无数据" style={{ height }} />
        )}
      </div>
    </CommonBorder>
  );
};

export default connect(({ global, loading }) => ({
  screenToken: global.screenToken,
  loading: loading.effects["chartData/getStorageInNumRankYesterday"],
}))(YzYesterdayInNum);
